<template>
	<view class="content">
		<uni-search-bar placeholder="请输入关键词搜索" class="uni-searchbar" cancelButton="none" radius="50" @confirm="search"
			@clear="clearKeyword" />
		<view v-if="blogs.length == 0" class="none">
			<image src="../../static/icons/nodata.png" mode="widthFix" class="logo"></image>
			<text class="title">抱歉，没有相关文章</text>
		</view>
		<view v-else class="item-container" v-for="(item,index) in blogs" :key="item.id" @click="gotoDetail(item.id)">
			<text class="item-titele">{{item.title}}</text>
			<rich-text :nodes="item.description" class="item-desc"></rich-text>
			<image :src="item.picture" mode="widthFix" class="img item-pic"></image>
			<text class="iconfont icon-xiala-down-filling  img-oper" @click.stop="popSheet(item.id)"></text><!-- 文本字体图标，不能用img标签，得使用text标签 -->
			<view>
				<text v-for="(tag,idx) in item.tags" :key="idx" class="item-tag">{{tag}}</text>
			</view>
			<!-- <image :src="item.user.avatar" mode="aspectFill" class="img-head"></image> -->
			<image :src="item.user.avatar" mode="aspectFill" class="img-head" @click.stop="clickShowUser(item.user)"></image>
			<view class="icon-container">
				<!-- 点赞缓存chang -->
				<text @click.stop="changeGood(item.id,true)" v-if="good_ids.indexOf(item.id) < 0" class="iconfont icon-good icon"></text>
				<text @click.stop="changeGood(item.id,false)" v-else class="iconfont icon-good-fill icon icon-good-yes"></text>
				<text class="icon-text">{{item.good}}</text>
				<text class=" iconfont icon-icon-test3 icon "></text>
				<text class="icon-text">{{item.comments.length}}</text>
				<text class="iconfont icon-icon-test1 icon "></text>
				<text class="icon-text">{{item.readCount}}</text>

			</view>
		</view>
		<view class="bootom" v-if="blogs.length==count">
			---我是有底线的---
		
		</view>
		<!-- 应用直接使用组件名称  ref组件实例，ref属性用于在组件实例中注册一个引用标识符，可以使用$refs访问到这个组件实例， -->
				<!--  @confirm可以方便地在页面中弹出一个确认对话框。当用户点击确认按钮时，可以执行指定的回调函数；当用户点击取消按钮时，
				可以执行另外一个回调函数。这个功能可以用来实现一些需要确认的交互操作，例如删除数据等。 -->
		<dialog-shell ref="shell" title="用户描述" @confirm="confirmInfo()">
					<text style="padding: 10rpx; font-size: 28rpx;">{{userDesc}}</text>
				</dialog-shell>
	</view>
</template>


<script>
	let page = 0
	let size = 3
	let key_blogs = "blogs"
	export default {
		data() {
			return {
				blogs: [],
				count: -1, //用于保存服务器返回的总数据条数
				isButtom: false,
				searching: false,
				good_ids: [],
				userDesc:""
			}
		},
		onLoad() {
			
		//注册通知
		this.$noti.add(this.$params.noti_refresh_count,this.notifyRefreshCount,this)
			let ids = uni.getStorageSync(this.$params.key_good_ids)
			if (ids) {
				this.good_ids = ids
			}
			let blogs = uni.getStorageSync(key_blogs)
			if (blogs) {
				this.blogs = blogs
				this.count = blogs.length

			} else {
				this.getPagedBlogs()
			}
		},
		// 移除通知
		ouUnload() {
			this.$noti.remove(this.$params.noti_refresh_count,this)
			// this.$noti.add(this.$params.noti_refresh_comment_count,this.notifRefreshCount,this)
		},
		// 请求刷新
		onPullDownRefresh() {
			page = 0
			this.blogs = []
			this.count = -1
			this.getPagedBlogs()
		},
		onReachBottom() {
			if (this.searching || this.blogs.length == this.count) {
				return
			}
			page += 1
			this.getPagedBlogs()
		},

		methods: {
		clickShowUser(user){
						this.userDesc = "作者:" + user.nickName +"\n联系方式：" + user.email
						this.$refs.shell.show()
					},
					confirmInfo(){
						console.log("emit");
					},
					
			gotoDetail(id) {
				uni.navigateTo({
					url: '../blog/blog?id=' + id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			
			// 2.2 定义方法
			notifyRefreshCount(info){
				let id = info.id
				let count =info.count
				this.refreshReadCount(id,count)
			},
			
			refreshReadCount(id, count) {
				// console.log("刷新了列表页");
				this.blogs.forEach(b => {
					if (b.id == id) {
						b.readCount = count
					}
				})
			},

			changeGood(id, isGood) {
				let url = this.$params.host
				let action = isGood ? this.$params.action_good : this.$params.action_del_good
				url += action
				let data = {
					"id": id
				}
				this.$request.postParam(url, data, res => {
					this.blogs.forEach(blog => {
						if (blog.id == id) {
							console.log(blog);
							blog.good = res.data
						}
					})

					if (isGood) {
						// this.good_ids.push(id)
						this.good_ids = this.good_ids.concat(id)
					} else {
						// console.log("取消点赞了"+id)
						let index = this.good_ids.indexOf(id)

						// 删除代码，shift删除第一个元素，pop删除最后一个元素，splice删除指定位置元素
						//pop.把最后一个元素替换要删除的元素，然后pop[1,2,3,4,5]
						//数组较大且顺序不影响程序功能时,可提高性能
						// this.good_ids.splice(index,1)
						this.$util.remove(this.good_ids, index)

					}
					uni.setStorageSync(this.$params.key_good_ids, this.good_ids);
					// todo:	同步到服务器,并且取最新数据
				}, () => {})
			},
			getPagedBlogs() {
				//服务器数据读取
					// console.log("开始分页请求");
				console.log("没有缓存")
				uni.setStorageSync("text", 123)
				if (this.blogs.length == this.count) {
					uni.showToast({
						title: '已经全部加载完成'
					});
					return
				}
				let header = {
					"content-type": "application/json;charset=UTF-8",
					"page": page,
					"size": size
				}
				this.$request.getWithHeader(this.$params.host + this.$params.action_blogs_page, header, res => {
					res.data.forEach(blog => {
						if (!blog.picture.startsWith("http")) {
							blog.picture = this.$params.host + blog.picture

						}
						blog.user.avatar = this.$params.host + blog.user.avatar
					})

					this.blogs = [...this.blogs, ...res.data]
					uni.setStorageSync(key_blogs, this.blogs)
					this.count = parseInt(res.message)
				}, () => {
					uni.stopPullDownRefresh()
				})
			},
			search(e) {
				// console.log(e.value);
				let kw = e.value
				if (kw.length > 0) {
					this.blogs = []
					this.count = -1
					// 发起请求
					//1.清空列表数据
					//重置count
					//发起请求：1要在常量文件中添加搜索的地址，2使用get方法发起请求，3请求的结果要处理
					let url = this.$params.host + this.$params.action_search + kw
					this.$request.get(url, res => {
						res.data.forEach(blog => {
							if (!blog.picture.startsWith("http")) {
								blog.picture = this.$params.host + blog.picture

							}
							blog.user.avatar = this.$params.host + blog.user.avatar
						})
						this.blogs = [...this.blogs, ...res.data]

					}, () => {
						this.searching = true
					})

				}
			},
			clearKeyword() {
				//1.初始化blogs
				//2.初始化页码
				//3.重新开始分页请求
				this.blogs = []
				page = 0
				this.getPagedBlogs()
				this.searching = false
			},
			popSheet(id) {
				uni.showActionSheet({
					itemList: ["删除", "收藏"],
					success: res => {
						if (res.tapIndex == 0) {
							uni.showModal({
								title: '删除blog',
								content: '确认删除吗？',
								showCancel: true,
								cancelText: '算了',
								confirmText: '删除',
								success: res => {
									if (res.confirm) {
										this.deleteBlog(id)
									}
								},
								fail: () => {},
								complete: () => {}
							});
						} else {
							uni.showToast({
								title: '收藏成功'
							});
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			deleteBlog(id) {
				uni.showToast({
					title: '还未登录，不能删除'
				});
			}
		}
	}
</script>

<style>
	@import url("index.css");
</style>
